<template>
	<view style="background-color: #f7f7f7">
		<view class="top">
			<view class="card">
				<view class="input_line">
					<text>姓名：</text>
					<input class="input" v-model="form.name" type="text" placeholder="输入姓名" />
				</view>
				<view class="input_line">
					<text>性别：</text>
					<picker
					:range="sex" 
					 @change="selectSex"
					v-model="form.sex" >
						<view class="picker">
						  {{ form.sex == 'F'?'女':'男' }}
						  <text class="iconfont icon-arrowdown"></text>
						</view>
					</picker>
				</view>
				<view class="input_line">
					<text>民族：</text>
					<input class="input" v-model="form.nation" type="text" placeholder="输入民族" />
				</view>
				<view class="input_line">
					<text>生日：</text>
					<picker
					 mode="date"
					 @change="selectDate"
					v-model="form.birthday" >
						<view class="picker-display">
						  {{ form.birthday}}
						  <text class="iconfont icon-arrowdown"></text>
						</view>
					</picker>
				</view>
				<view class="input_line">
					<text>家庭住址：</text>
					<input class="input" v-model="form.address" type="text" placeholder="输入家庭住址" />
				</view>
				<view class="input_line">
					<text>身份证号码：</text>
					<input class="input" v-model="form.idCard" type="text" placeholder="输入负责人身份证号码" />
				</view>
				<view class="card">
					<view class="big_title">身份证证正反面照片</view>
					<view style="margin: 20rpx; display: flex; justify-content: space-around; align-items: center">
						<image v-if="form.front" :src="form.front" class="image"></image>
						<button v-else @click="upImg(1)">上传正面</button>
						<image v-if="form.opposite" :src="form.opposite" class="image"></image>
						<button v-else @click="upImg(2)">上传反面</button>
					
					</view>
				</view>
				<view class="card" style="text-align: center;">
					<view class="big_title">人脸照</view>
					<image v-if="form.faceImg" :src="form.faceImg" class="image2"></image>
					<button v-else @click="upImg(3)">上传正面照</button>
				</view>
		</view>
		<button @click="onSubmitInfo" :disabled="text=='审核中'" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white">{{text}}</button>
		</view>
	</view>
</template>

<script setup>
import request from '@/uitls/request';	
import uploadFile from '@/uitls/uploadFile';
export default {
  data() {
    return {
      form: {
        uid: null,
        name: null,
        sex: 'F',
        nation: null,
        birthday: null,
        address: null,
        idCard: null,
        front: null,//身份证正面
        opposite: null,//身份证反面
        faceImg: null,//人脸
        status: null,
        createTime: null,
        updateTime: null,
      },
	  // 对象数组（需配合 range-key）
	  sex:['女','男'],
	  onsubmitType:'',
	  text:'提交',
	  userInfo:null
    };
  },
  methods: {
	onSubmitInfo(){
		uni.showToast({
		  title: '信息提交中...',
		  icon: 'loading',  // 或者 'none'
		  mask: true,       // 防止用户操作
		  duration: 300000   // 设置一个较长的时间，避免自动消失
		});
		// console.log(this.form)
		request({
			url: '/bigbase/verification',
			method: this.onsubmitType,
			data: this.form,
			success: (res) => {
				uni.hideLoading();
				if(res.data.code==200){
					uni.switchTab({
						url:'/pages/my/my'
					})					
				}else{
					uni.showToast({
					  title: res.data.msg||'信息提交失败',
					  icon: 'none'
					});
				}
			}
		})
	},
	selectSex(e) {
      // console.log(e);
	  if(e.detail.value==0){
		  this.form.sex = 'F'
	  }else{
		  this.form.sex = 'M'
	  }
	},
	selectDate(e) {
		// console.log(e)
		this.form.birthday = e.target.value
	},
    upImg(e) {
		console.log(e)
      uploadFile({
        success: (res) => {
          // console.log("上传", res);
          switch (e) {
            case 1:
              this.form.front = res;
              break;
            case 2:
              this.form.opposite = res;
              break;
            case 3:
              this.form.faceImg = res;
              break;
            default:
              break;
          }
		  // console.log(this.form)
        },
        fail: (err) => {
          console.log(err);
        }
      });
    }
  },
  onShow(){
	this.userInfo = uni.getStorageSync('userInfo')
	const that = this
	console.log(this.userInfo)
	request({
		url: '/bigbase/verification/getInfo/'+this.userInfo.id,
		method: 'GET',
		success: (res) => {
			console.log(111,res.data)
			if(res.data.data==null){
				that.form.uId = this.userInfo.id
				that.onsubmitType = 'POST'
			}else{
				that.form = res.data.data
				that.onsubmitType = 'PUT'
				if(idInfo.status==1){
					that.text = '提交'
				}else{
					that.text = '审核中'
				}
			}
		}
	})
  }
};
</script>

<style>
.card {
	border-radius: 20px;
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx 20rpx;
}
.input_line {
	font-weight: 500;
	margin: 30rpx 10rpx;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
.input {
	border: 1px solid gray;
	padding: 10rpx 15rpx;
	border-radius: 20px;
	font-size: 20rpx;
	font-weight: 600;
}
.big_title {
	margin-left: 20rpx;
	font-weight: 600;
}
.upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
.plus-icon {
	font-size: 40px;
	color: #ccc;
	margin-bottom: 10px;
}
.upload-text {
	font-size: 12px;
	color: #999;
}
.image {
	height: 100px;
	width: 158px;
}
.image2 {
	height: 200px;
	width: 150px;
}
.icon-arrowdown {
  position: absolute;
  right: 15px;
  top: 0;
  color: #999;
}
.input_line {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.label {
width: 80px;
color: #333;
}

.picker {
flex: 1;
height: 40px;
line-height: 40px;
padding: 0 15px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
position: relative;
}
.picker-display {
  background-color: #f9f9f9; /* 背景色 */
  border: 1px solid #ddd; /* 边框 */
  padding: 10px; /* 内边距 */
  width: 250rpx;
}
</style>

